<template>
	<view class="MP-class">
		<nav-bar class="sticky">
			<view slot="left" class="btn" @click="back">
				<image class='image' src="../../static/img/common/left-arrow.svg" alt="" />
			</view>
			<view class="searchBar" v-show="imgLoaded" slot="center">
				<image class='image' src="../../static/img/search/search.svg" alt="" @load="imgLoaded = true" />
				<input  name="search" type="text" class="search input" :placeholder="preSearchKey" v-model="key"
					autocomplete="off" ref="input" />
			</view>
			<view slot="right" @click="searchGoods">搜索</view>
		</nav-bar>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1200"></uni-popup-message>
		</uni-popup>
		<scroll-view :show-scrollbar="false" v-if="goods.length" class="result-top">
			<good-list :goods="goods" />
			<view v-if="none" class="none">没有更多了~</view>
		</scroll-view>

		<empty v-else description="暂无商品" />
		<back-top v-show="IsBottom" @click.native="backTop" />
	</view>
</template>

<script>
	import NavBar from "components/common/NavBar/NavBar";
	import GoodList from "components/content/Goods/GoodList";
	import BackTop from "components/content/BackTop/BackTop";
	import Empty from "../../components/common/Empty/Empty";
	import {
		debounce
	} from "common/utils";

	import {
		searchGood
	} from "network/search";

	export default {
		name: "SearchPage",
		components: {
			NavBar,
			GoodList,
			BackTop,
			Empty
		},
		data() {
			return {
				goods: [],
				imgLoaded: false,
				limit: 0,
				preSearchKey: null,
				key: "",
				preKey: "",
				IsBottom: false,
				params: null,
				msgType: 'warn',
				messageText: '',
			};
		},
		computed: {
			CurrentGoods() {
				return this.goods.slice(-10);
			},
			none() {
				if (this.goods.length) {
					return this.limit < this.goods.length;
				}
				return false;
			}
		},
		onPageScroll(e) {
			this.IsBottom = this.pageHeight < e.scrollTop;
		},
		onReachBottom() {
			this.loadMore();
		},
		onLoad(option) {
			this.logic(option);
		},


		methods: {
			logic(option) {
				uni.getStorage({
					key: 'preSearchKey',
					success: (res) => {
						this.preSearchKey = res.data;
						this.preKey = this.preKey ? this.preKey : res.data;
					},

				})

				if (option.key) {
					this.key = option.key;
					this.loadNewGood();
				}
			},
			warning(msg) {
				this.messageText = msg;
				this.$refs.message.open()
			},
			searchGoods() {
				if (this.params != null && this.key == this.preKey) return;

				if (!this.key) {
					//#ifdef H5
					uni.redirectTo({
						url: `/pages/search/SearchPage?key=${this.preSearchKey}`,
						fail(msg) {
							console.log(msg)
						}
					});
					//#endif

					//#ifdef MP-WEIXIN || APP
					this.$set(this, 'goods', []);
					this.key = this.preSearchKey;
					this.loadNewGood();
					//#endif

				} else if (this.key.trim().length) {
					//#ifdef H5
					uni.navigateTo({
						url: `/pages/search/SearchPage?key=${this.key}`,
						fail(msg) {
							console.log(msg)
						}
					});
					//#endif

					//#ifdef MP-WEIXIN || APP
					this.preSearchKey = uni.getStorageSync('preSearchKey');
					this.preKey = this.preKey ? this.preKey : uni.getStorageSync('preSearchKey');
					this.$set(this, 'goods', []);
					this.loadNewGood();
					//#endif
				} else {
					this.warning("搜索不能为空");
				}

			},

			loadNewGood() {
				console.log('loadNewGood');
				searchGood(this.key.trim(), this.limit).then((res) => {
					let arr = [];
					for (let data of res[1].data.data) {
						arr.push(JSON.parse(data.data));
					}
					this.goods.splice(0, 0, ...arr);
					if (arr.length < 10) {
						this.limit = 0;
					} else {
						this.limit += 10;
					}
					this.preKey = this.key;
				});
			},

			loadMore() {
				console.log('loadmore', this.limit, this.goods.length)
				if (this.none) return;
				searchGood(this.key.trim(), this.limit).then((res) => {
					let arr = [];
					for (let data of res[1].data.data) {
						arr.push(JSON.parse(data.data));
					}
					this.goods.push(...arr);

					if (arr.length < 10) {
						this.limit = 0;
					} else {
						this.limit += 10;
					}
				});
			},
		},
		mounted() {

		},
	};
</script>
<style lang="scss" scoped>
	.MP-class {
		/* #ifdef MP-WEIXIN */
		margin-top: 190rpx;
		/* #endif */
	}


	.result-top {
		margin-top: 100rpx;
	}

	.sticky {
		position: fixed;
		top: 0;
		z-index: 11;
		background-color: white;
	}

	.btn {
		display: flex;
		width: 120rpx;
		justify-content: center;
		align-items: center;
		height: 100%;
		position: relative;
		z-index: 11;
	}

	.searchBar {
		width: 100%;
		border-radius: 50rpx;
		background-color: aliceblue;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.searchBar .input {
		background-color: aliceblue;
		width: calc(100% - 120rpx);
		border-radius: 20rpx;
		outline: none;
		text-align: left;
	}

	.input::selection {
		background-color: aliceblue;
	}

	.none {
		width: 100vw;
		text-align: center;

	}

	.btn .image {
		width: 64rpx;
		height: 64rpx;
	}

	.searchBar .image {
		width: 64rpx;
		height: 64rpx;
	}
</style>
